<template>
  <jl-base>

    <jl-header>
      <mt-header title="工程交资料" :fixed="true">
        <i slot="right">
          <mt-button v-on:click="makeData">新增</mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <div class="list_search_header">
        <input placeholder="搜索购买单位" v-model="condition">
        <span @click="search">搜索</span>
      </div>

      <div class="qd_list" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
          <template v-for="item in dataLsit">
            <div class="qd_item" v-on:click="goModify(item)">
              <div class="qd_header bor_bottom">
                <div class="w12 qd_address">
                  <em class="mr5">{{ item['BZMC'] }}</em>{{ item['DLD03MC'] }} - {{ item['DLD07'] }}
                </div>
                <div class="w12 mt10">
                  <span class="w06 mt10 tl"><i class="fa fa-file-text mr5"></i>{{ item['JLWBDH'] }}</span>
                  <span class="w06 mt10 tr"><i class="fa fa-clock-o mr5"></i>{{ item['JZL10'] }}</span>
                </div>
              </div>
              <div class="qd_body">
                <div class="w12 mt10" :class="{'Y':'font_green','N':'font_red','null':'font_yellow'}[item['JZL13']]">
                  <h3 class="w06">{{item['JZL13MC']}}</h3>
                </div>
              </div>
            </div>
          </template>
        </mt-loadmore>
        <jl-bottom-loading :class="{'false':'hide'}[loading]"/>
      </div>

      <div class="tips_no_pro" v-if="this.dataLsit.length <=  0">
        <div class="tips_no_main">
          <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
          <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无交资料记录</div>
        </div>
      </div>

    </jl-content>

  </jl-base>
</template>

<script>


  export default {
    data() {
      return {
        dataLsit: [],
        condition: '',
        loading: false,
        page_num: 1,
        isEnd: false,
      }
    },
    methods: {
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.queryData()
      },
      makeData() {
        this.$router.push({name: 'agent-data-new'});
      },
      queryData() {
        this.$engineer.queryStartData({page_num: this.page_num, condition: this.condition})
          .then(v => {
            let dataList = v['list'] || [];
            if ($Utils.isNull(dataList))
              this.isEnd = true;
            Array.prototype.push.apply(this.dataLsit, dataList);
            this.loading = false;

            this.$forceUpdate();
          })
          .catch(e => {
            this.loading = false
          })
      },
      search() {
        this.page_num = 1;
        this.dataLsit = [];
        this.queryData();
      },
      goModify(item) {
        this.$router.push({name: 'agent-data-new', params: {item: item}})
      },
      loadTop() {
        this.page_num = 1;
        this.$engineer.queryStartData({page_num: this.page_num})
          .then(v => {
            let dataList = v['list'] || [];
            if ($Utils.isNull(dataList)) this.isEnd = true;
            this.dataLsit = {...{}, ...dataList}
            this.loading = false;
            this.$refs.loadmore.onTopLoaded();
            this.$forceUpdate();
          })
          .catch(e => {
            this.loading = false
          })
      }
    },
    activated() {
      this.dataLsit = [];
      this.queryData();
    },
  }
</script>

<style scoped>

</style>
